<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>

<div id="app">
    <ol>
        <diy-el
                v-for="programLang in programLangList"
                v-bind:item="programLang"
        ></diy-el> <!--v-bind:key="programLang.id"-->
    </ol>
</div>

<script type="text/javascript">

    /* 从父作用域将数据传到子组件才对。让我们来修改一下组件的定义，使之能够接受一个 prop： */
    Vue.component("diy-el", {
        props : ['item'],
        template : "<li> {{item.id}} {{item.text}} </li>"
    });

    let vm = new Vue({
        el : "#app",
        data : {
            programLangList : [
                { id : 1, text : 'java'},
                { id : 2, text : 'c/c++'},
                { id : 3, text : 'linux'},
                { id : 4, text : 'python'},
                { id : 5, text : 'rust'},
                { id : 6, text : 'ruby'},
                { id : 7, text : 'c#'},
            ]
        }
    });
</script>
<!--
大型应用中，有必要将整个应用程序划分为组件，以使开发更易管理。
在后续教程中我们将详述组件，不过这里有一个 (假想的) 例子，
以展示使用了组件的应用模板是什么样的：
<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>

-->
</body>
</html>